/*
 * @Author: your name
 * @Date: 2020-10-19 16:52:46
 * @LastEditTime: 2020-11-02 15:20:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /Project/DemoNodeProject/src/Pages/FineFoodRegisterScreen.js
 */
import React, { Component } from 'react'
import { 
    View, 
    Text,
    TextInput,
    Image,
    TouchableOpacity
 } from 'react-native'
import { connect } from 'react-redux'
import {commitFood, uploadFile} from '../Actions/UserActions'
import {Base64} from '../Utils/Util'
import { Toast } from '@ant-design/react-native'

class FineFoodRegisterScreen extends Component {
    constructor(props) {
        super(props) 
        this.state = {
            BusinessName:userInfo.BusinessName,    //商家名称
            FoodName: '',       //商品名称
            price:0,            //商品价格
            FoodImage:null        //商品图片地址
        };
    }


    shouldComponentUpdate(nextProps, nextState) {
        
        if (this.props.isFetch && !nextProps.isFetch) {
            if (nextProps.code == 200) {
                let FoodImage = nextProps.data.imageName;
                this.setState({FoodImage})
            }
        }
        if (this.props.isOtherFetch && !nextProps.isOtherFetch) {            
            if (nextProps.isOtherFetch == 200) {
                Toast.success(nextProps.othermsg)  
            } else {
                Toast.info(nextProps.othermsg)
            }
        }
        return true
    }

    commit() {
        this.props.commitFood(this.state)   
    }

    onChangeText(type,value) {
        this.setState({[type]:value})
    }

    upload = () => {
        Base64().then((FromData) => {
            console.log("上传结果:",FromData);
            this.props.uploadFile(FromData)
        })
    }
    
    render() {
        let value = API_ROOT + `api/showImage/upload/${this.state.FoodImage}`
        return (
            <View style={{flex:1, backgroundColor:'white'}}>

                <View style={{ flexDirection:'row',justifyContent:'space-between',alignItems:'center',height:50, backgroundColor:'rgb(235,235,235)',marginLeft:10, marginRight:10,marginTop:10,marginBottom:5,padding:5}}>
                    <Text>商家名称</Text>
                    <Text>{userInfo.BusinessName}</Text>
                </View>

                <View style={{ flexDirection:'row',justifyContent:'space-between',alignItems:'center',height:50, backgroundColor:'rgb(235,235,235)',marginLeft:10, marginRight:10,marginTop:5,marginBottom:0,padding:5}}>
                    <Text>商品名称</Text>
                    <TextInput value={this.state.FoodName} onChangeText={this.onChangeText.bind(this,'FoodName')} placeholder='请输入商品名称' style={{width:200, height:50,textAlign:'right'}}></TextInput>
                </View>
                
                <View style={{ flexDirection:'row',justifyContent:'space-between',alignItems:'center',height:50, backgroundColor:'rgb(235,235,235)',marginLeft:10, marginRight:10,marginTop:10,marginBottom:5,padding:5}}>
                    <Text>商品价格</Text>
                    <TextInput value={this.state.price} onChangeText={this.onChangeText.bind(this,'price')} placeholder='请输入商家价格' style={{width:200, height:50,textAlign:'right'}}></TextInput>
                </View>

                <TouchableOpacity style={{alignSelf:'center', width:150,height:150,marginBottom:20}} onPress={this.upload}>
                    <Image resizeMode='cover'  style={{flex:1,backgroundColor:'#dcdcdc'}} source={{uri: value, cache: 'force-cache'}}></Image>
                </TouchableOpacity>    

                <TouchableOpacity onPress={this.commit.bind(this)} style={{height:44,width:300, justifyContent:'center',alignItems:'center', backgroundColor:'gray',alignSelf:'center'}}>
                    <Text>提   交</Text>
                </TouchableOpacity>

                
            </View>
        )
    }
}

const mapStateToProps = (state) => {
    let { isFetch, code, data, msg} = state.UserInfo.upload || '';
    let {isOtherFetch, othercode, othermsg, otherdata} = state.UserInfo.commitfood || '';
    return {
        isFetch, 
        code, 
        data, 
        msg,

        isOtherFetch, 
        othercode, 
        othermsg, 
        otherdata
    };       
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        commitFood: (paramter)=> dispatch(commitFood(paramter)),
        uploadFile: (paramter)=> dispatch(uploadFile(paramter))

        
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(FineFoodRegisterScreen)